new Vue({
    el: '#app',
    data: {
        entryId: '',
        title: '',
        absText1: '',
        absText2: '',
        tags: [{ key: '', value: '' }]
    },
    methods: {
        selectEntry() {
            // this.tags.splice(0, 0, { key: 'user_select', value: 'select' });
            // 检查 tags 数组中是否已经存在 key 为 'user_select' 的对象
            const exists = this.tags.some(tag => tag.key === 'user_select');
            // 如果不存在，则添加新的 { key: 'user_select', value: 'select' }
            if (!exists) {
                this.tags.splice(0, 0, { key: 'user_select', value: 'select' });
            }
        },
        addTag(index) {
            this.tags.splice(index + 1, 0, { key: '', value: '' });
        },
        removeTag(index) {
            this.tags.splice(index, 1);
        },
        async sync_from_backend(entry_id) {
            console.log("sync_from_backend :",entry_id)
            try {
                const response = await fetch(`/api/syncfrom?entry_id=${entry_id}`, {
                    method: 'GET'
                });
                const output = await response.json();
                var data = output.data
                this.entryId = data.entryId;
                this.title = data.title;
                this.absText1 = data.absText1;
                this.absText2 = data.absText2;
                this.tags = data.tags;
                console.log('从后端同步数据成功:', data);
            } catch (error) {
                console.error('从后端同步数据时发生错误:', error);
            }
        },
        async sync_to_backend(entry_id) {
            try {
                console.log("sync_to_backend ",this.entryId)
                const response = await fetch('/api/syncto', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        "entry_id": this.entryId,
                        title: this.title,
                        absText1: this.absText1,
                        absText2: this.absText2,
                        tags: this.tags
                    })
                });
                const data = await response.json();
                console.log('数据已同步到后端:', data);
            } catch (error) {
                console.error('同步数据到后端时发生错误:', error);
            }
        },
        async previousEntry() {
            try {
                const response = await fetch(`/api/preid?entry_id=${this.entryId}`, {
                    method: 'GET'
                });
                const data = await response.json();
                // console.log(output)
                const previousEntryId = data.entry_id_new;
                await this.sync_to_backend(this.entryId);
                await this.sync_from_backend(previousEntryId);
            } catch (error) {
                console.error('获取上一个条目时发生错误:', error);
            }
        },
        async nextEntry() {
            try {
                const response = await fetch(`/api/nxtid?entry_id=${this.entryId}`, {
                    method: 'GET'
                });
                const data = await response.json();
                console.log("data ",data)
                const nextEntryId = data.entry_id_new;
                await this.sync_to_backend(this.entryId);
                await this.sync_from_backend(nextEntryId);
                // // 检查数据是否正确更新
                // console.log('已更新的数据:', {
                //     entryId: this.entryId,
                //     title: this.title,
                //     absText1: this.absText1,
                //     absText2: this.absText2,
                //     tags: this.tags
                // });
            } catch (error) {
                console.error('获取下一个条目时发生错误:', error);
            }
        },
        getfirstEntry() {
            this.entryId = "get_first_entry_id";
            this.nextEntry();
        },
        jumpToID() {
            this.sync_from_backend(this.entryId);
        },
        handleKeydown(event) {
            console.log("event.key ",event.key)
            switch (event.key) {
                // case 's':
                //     this.selectEntry();
                //     break;
                case 'ArrowUp':
                    this.previousEntry();
                    break;
                case 'ArrowDown':
                    this.nextEntry();
                    break;
                // case 'j':
                //     this.jumpToID();
                //     break;
                default:
                    break;
            }
        }
    },
    mounted() {
        // 初始化数据
        console.log("调用 getfirstEntry");
        this.getfirstEntry();
        // 初始化键盘
        document.addEventListener('keydown', this.handleKeydown);
    },
    beforeDestroy() {
        // 移除键盘事件监听
        document.removeEventListener('keydown', this.handleKeydown);
    }
});
